<template>
  <view class="flex-column page">
    <custom-navigation title="商品分类" :rightImg="!isDrag?'/static/add.png':null" :rightTxt="isDrag?'保存':null"
      @rightAction="saveSort"></custom-navigation>

    <scroll-view :scroll-y="true" class="list">
      <HM-dragSorts-type :isMultiple="isMultiple" :selectMode="selectMode" :list="list" :isDrag="isDrag"
        :allParentsNoObj="allParentsNoObj.all" :autoScroll="true" :feedbackGenerator="true" :longTouch="true"
        :listHeight="listHeight" :rowHeight="100" @change="change" @confirm="confirm" @onclick="onclick">
      </HM-dragSorts-type>
    </scroll-view>
    <view class="bottom flex-row-center" v-if="isMultiple" @click="multipleSelect">
      <view class="text">已选{{getAllNum()}}</view>
      <view class="btn2">确认选择</view>
    </view>

    <!-- <view class="bottom flex-column-center" v-else-if="!isDrag" @click="isDrag=true"> -->
    <view class="bottom flex-column-center" v-else-if="!isDrag" @click="dragClick">
      <view class="btn">排序</view>
    </view>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        classifycations: [],
        listHeight: 100,
        list: [],
        isDrag: false,
        selectMode: false,
        isMultiple: false,
        moveList: [],
        selectNo: 0,
        allParentsNoObj: {
          all: []
        },
      }
    },
    onLoad(options) {
      this.selectMode = options.selectMode ?? false
      this.isMultiple = options.isMultiple ?? false
      this.selectNo = options.selectNo ?? 0
    },
    onShow() {
      this.getClassifycations();
    },
    methods: {
      getAllParentsNo(data, no) {
        let res = {
          no: no,
          parent_no: '',
          brother_no: [],
          son_no: [],
          all: []
        };
        if (data && no) {
          let obj = {}
          let parent_obj = {}
          data.forEach(item => {
            if (item && item.no) {
              obj[item.no] = item
            }
            if (item && item.parent_no) {
              if (!parent_obj[item.parent_no]) {
                parent_obj[item.parent_no] = [];
              }
              parent_obj[item.parent_no].push(item.no)
            }
          });

          res.parent_no = obj[no] ? obj[no].parent_no : '';
          res.son_no = parent_obj[no] ? parent_obj[no] : [];
          if (res.parent_no) {
            res.brother_no = parent_obj[res.parent_no] ? parent_obj[res.parent_no] : [];
          }
          res.all = [no, res.parent_no, ...res.son_no, ...res.brother_no];
        }
        return res;
      },
      getAllNum() {
        console.log("getAllNum");
        let count = 0;
        for (let i in this.moveList) {
          if (this.moveList[i].check) {
            count++
          }
        }
        return count;
      },
      multipleSelect() {
        let list = [];
        for (let i in this.moveList) {
          if (this.moveList[i].check) {
            list.push(this.moveList[i])
          }
        }
        uni.setStorageSync("multipleSelectClassify", list)
        uni.navigateBack()
      },
      dragClick() {
        this.moveList = this.list
        this.isDrag = true
      },
      saveSort() {
        if (this.isDrag == false) {
          uni.navigateTo({
            url: '/pages/goods/baseinfo/add_goods_classfiy'
          })
        } else {
          this.isDrag = false;
          uni.showLoading({
            title: "加载中..."
          })
          let params = [];
          let count = 0;
          for (let i in this.moveList) {
            if (this.moveList[i].children != null && this.moveList[i].children.length > 0) {
              for (let j in this.moveList[i].children) {
                params.push({
                  "serviceName": "srvretail_goods_classify_update",
                  "condition": [{
                    "colName": "id",
                    "ruleType": "eq",
                    "value": this.moveList[i].children[j].id
                  }],
                  "data": [{
                    "serial_no": count,
                    "parent_no": this.moveList[i].no
                  }]
                })
                count++
              }
            } else {
              params.push({
                "serviceName": "srvretail_goods_classify_update",
                "condition": [{
                  "colName": "id",
                  "ruleType": "eq",
                  "value": this.moveList[i].id
                }],
                "data": [{
                  "serial_no": count
                }]
              })
              count++
            }
          }
          this.$apiPost("/retail/operate/srvretail_goods_classify_update", params).then(res => {
            uni.hideLoading()
            if (res.state == 'SUCCESS') {
              uni.showToast({
                title: "修改成功！",
                mask: true
              })
              this.getClassifycations()
            }
          })
        }
      },
      getClassifycations() {
        this.$apiPost("/retail/select/srvretail_goods_classify_select", {
          serviceName: "srvretail_goods_classify_select",
          "colNames": ["*"]
        }).then(res => {
          this.newList = [];
          this.allParentsNoObj = this.getAllParentsNo(res.data, this.selectNo);
          for (let i in res.data) {
            let item = res.data[i];
            if (item.parent_no == null) { //顶级菜单
              let children = this.getCcChildren(res.data, item.no, 0);
              item.serial_no = i //保证序列号是从上到下
              item.children = children //用来恢复折叠
              item.expand = true
              item.level = 0
              this.newList.push(item)
              this.newList.push(...children)
            }
          }

          this.classifycations = this.newList;
          this.list = this.newList;

          this.listHeight = this.list.length * 120;
        })
      },

      getCcChildren(classifycations, parent_no, level) {
        var list = [];
        level++
        for (var i in classifycations) {
          let item = classifycations[i];

          if (item.parent_no == parent_no) {


            item.serial_no = i //保证序列号是从上到下
            let children = this.getCcChildren(classifycations, item.no, level);
            item.serial_no = i //保证序列号是从上到下
            if (children != null && children.length != 0)
              item.children = children //用来恢复折叠
            item.expand = true
            item.level = level
            list.push(item)
            if (children != null && children.length != 0)
              list.push(...children)


            // list.push(item)
          }
        }
        return list;
      },
      onclick(e) {
        console.log('=== onclick start ===');
        console.log("被点击行: " + JSON.stringify(e.value));
        console.log("被点击下标: " + JSON.stringify(e.index));
        console.log('=== onclick end ===');

        let item = this.list[e.index];
        if (this.selectMode) {
          if (item && item.no && this.allParentsNoObj && this.allParentsNoObj.all.includes(item.no)) {
            uni.showToast({
              title: "请选择其他分类",
              icon: 'none'
            })
            return
          }
          var pages = getCurrentPages(); // 获取页面栈
          var currPage = pages[pages.length - 1]; // 当前页面
          var prevPage = pages[pages.length - 2]; // 上一个页面
          prevPage.goods_classify = this.list[e.index]
          uni.navigateBack()
          return
        }

        let parentData = null;
        //修改
        // let item = this.list[e.index]
        if (item.is_topping == "是") {
          return;
        }
        for (let i in this.list) {
          if (item.parent_no == this.list[i].no) {
            parentData = JSON.stringify({
              classify_name: this.list[i].classify_name,
              no: this.list[i].no,
              parent_no: this.list[i].parent_no
            })

          }
        }
        uni.navigateTo({
          url: `/pages/goods/baseinfo/add_goods_classfiy?isEdit=true&isParent=false&parentData=${parentData}&name=${item.classify_name}&currentNo=${item.no}&id=${item.id}`
        })
      },
      change(e) {
        console.log('=== change start ===');
        console.log("被拖动行: " + JSON.stringify(e.moveRow));
        console.log('原始下标：', e.index);
        console.log('移动到：', e.moveTo);
        console.log('=== change end ===');
      },
      confirm(e) {
        console.log('=== confirm start ===');
        console.log("被拖动行: " + JSON.stringify(e.moveRow));
        console.log('原始下标：', e.index);
        console.log('移动到：', e.moveTo);
        console.log('=== confirm end ===');
        console.log('list', this.list);
        this.moveList = e.list
      }
    }
  }
</script>

<style scoped lang="scss">
  .page {
    height: 100vh;
    width: 100%;
  }

  .list {
    flex: 1;
    height: 500rpx;
  }

  .bottom {
    width: 100%;
    height: 146rpx;
    justify-content: center;
    opacity: 1;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 -32rpx 32rpx 3rpx rgba(245, 245, 247, 1);
    z-index: 1;

    .text {
      flex: 1;
      font-size: 32rpx;
      font-weight: 700;
      margin-left: 24rpx;
      color: rgba(51, 51, 51, 1);
    }

    .btn2 {
      width: 320rpx;
      height: 80rpx;
      opacity: 1;
      margin-right: 100rpx;
      border-radius: 40px;
      background: rgba(56, 192, 158, 1);
      font-size: 32rpx;
      font-weight: 700;
      line-height: 80rpx;
      text-align: center;
      color: rgba(255, 255, 255, 1);
    }

    .btn {
      width: 320rpx;
      height: 80rpx;
      opacity: 1;
      border-radius: 40px;
      background: rgba(56, 192, 158, 1);
      font-size: 32rpx;
      font-weight: 700;
      line-height: 80rpx;
      text-align: center;
      color: rgba(255, 255, 255, 1);
    }
  }
</style>
